<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <!-- CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
    <style>
        .container{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 100px 0;
        }
        .my-chart {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .input-wrapper{
            display: flex;
            justify-content: center;
            line-height: 40px;
        }
        .input-wrapper input{
            width: 500px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="jumbotron jumbotron-fluid" style="width: 100%">
            <div class="container">
                <h1 class="display-4">Coronavirus Situation</h1>
                <p class="lead"></p>
            </div>
        </div>
        <div style="margin-bottom: 30px" class="alert alert-primary" role="alert">
            1.全球新冠病毒确诊详情
        </div>
        <div class="my-chart">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 1000px;height:800px;"></div>
        </div>

        <div style="margin: 30px 0" class="alert alert-primary" role="alert">
            2.查看指定country的确诊详情
        </div>
        <div class="input-wrapper">
            <label for="ip2">Country:</label>
            <input type="text" class="form-control" id="ip2" placeholder="please input country name">
        </div>
        <button id="countryBtn" type="button" class="btn btn-primary" style="margin-bottom: 20px">search</button>
        <div class="my-chart">
            <div id="main3" style="width: 1000px;height:800px;"></div>
        </div>

        <div style="margin: 30px 0" class="alert alert-primary" role="alert">
            3.查看指定state的确诊详情
        </div>
        <div class="input-wrapper">
            <label for="ip1">State:</label>
            <input type="text" class="form-control" id="ip1" placeholder="please input state name">
        </div>
        <button id="stateBtn" type="button" class="btn btn-primary" style="margin-bottom: 20px">search</button>
        <div class="my-chart">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main2" style="width: 1000px;height:800px;"></div>
        </div>


    </div>

</body>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3= echarts.init(document.getElementById('main3'));

    //监听查询state操作
    $('#stateBtn').click(()=> {
        let input = $('#ip1')
        console.log(input.val().trim())
        getState(input.val().trim())
    })
    //监听查询country操作
    $('#countryBtn').click(()=> {
        let input = $('#ip2')
        console.log(input.val().trim())
        getCountry(input.val().trim())
    })

    function getGlobal(){
        $.get("http://localhost:8080/getGlobalConfirmed", function (result) {
            let data = {
                categoryData: result.dateList,
                valueData: result.amountList
            }
            let option = {
                title: {
                    text: `全球新冠病毒确诊人数：${result.latestTotalCases}，比昨日新增：${result.diffFromPrevDay}   数据截止于：${result.dateList[result.dateList.length-1]}`,
                    left: 20
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: false
                        },
                        saveAsImage: {
                            pixelRatio: 2
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    bottom: 90
                },
                dataZoom: [{
                    type: 'inside'
                }, {
                    type: 'slider'
                }],
                xAxis: {
                    data: data.categoryData,
                    silent: false,
                    splitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }
                },
                yAxis: {
                    splitArea: {
                        show: false
                    }
                },
                series: [{
                    type: 'bar',
                    data: data.valueData,
                    // Set `large` for large data amount
                    large: true
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            option && myChart.setOption(option);
        });
    }

    function getState(stateName){
        $.get("http://localhost:8080/getStateConfirmed?stateName="+stateName, function (result) {
            let data = {
                categoryData: result.dateList,
                valueData: result.amountList
            }
            let option = {
                title: {
                    text: `State: ${stateName}  确诊人数：${result.latestTotalCases}，比昨日新增：${result.diffFromPrevDay}      数据截止于：${result.dateList[result.dateList.length-1]}`,
                    left: 20
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: false
                        },
                        saveAsImage: {
                            pixelRatio: 2
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    bottom: 90
                },
                dataZoom: [{
                    type: 'inside'
                }, {
                    type: 'slider'
                }],
                xAxis: {
                    data: data.categoryData,
                    silent: false,
                    splitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }
                },
                yAxis: {
                    splitArea: {
                        show: false
                    }
                },
                series: [{
                    type: 'bar',
                    data: data.valueData,
                    // Set `large` for large data amount
                    large: true
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            option && myChart2.setOption(option);
        });
    }

    function getCountry(countryName){
        $.get("http://localhost:8080/getCountryConfirmed?countryName="+countryName, function (result) {
            var data = {
                categoryData: result.dateList,
                valueData: result.amountList
            }
            var option = {
                title: {
                    text: `Country: ${countryName} 确诊人数：${result.latestTotalCases}，比昨日新增：${result.diffFromPrevDay}    数据截止于：${result.dateList[result.dateList.length-1]}`,
                    left: 20
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: false
                        },
                        saveAsImage: {
                            pixelRatio: 2
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    bottom: 90
                },
                dataZoom: [{
                    type: 'inside'
                }, {
                    type: 'slider'
                }],
                xAxis: {
                    data: data.categoryData,
                    silent: false,
                    splitLine: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }
                },
                yAxis: {
                    splitArea: {
                        show: false
                    }
                },
                series: [{
                    type: 'bar',
                    data: data.valueData,
                    // Set `large` for large data amount
                    large: true
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            option && myChart3.setOption(option);
        });
    }


    $(function () {
        getGlobal()
        getState("Saskatchewan")
        getCountry("China")
    })

</script>
</html>